import { StyleSheet, View } from "react-native";
import { useState } from 'react';

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { BottomNavigation, Text } from 'react-native-paper';
import Index from "./src/index";
// 引用导航, 并将整个APP包裹在其中
import { NavigationContainer } from "@react-navigation/native";

// 引用创建导航堆栈的函数
import { createNativeStackNavigator } from "@react-navigation/native-stack";



const Tab = createBottomTabNavigator();

const MusicRoute = () => <Index />;

const AlbumsRoute = () => <Text>Albums</Text>;

const RecentsRoute = () => <Text>Recents</Text>;

const NotificationsRoute = () => <Text>Notifications</Text>;



const Stack = createNativeStackNavigator()


function App(): JSX.Element {

  const [index, setIndex] = useState(0);
  const [routes] = useState([
    { key: 'music', title: '音乐', focusedIcon: 'heart', unfocusedIcon: 'heart-outline' },
    { key: 'albums', title: '歌单', focusedIcon: 'album', badge: 3 },
    { key: 'recents', title: '历史', focusedIcon: 'history' },
    { key: 'notifications', title: '消息', focusedIcon: 'bell', unfocusedIcon: 'bell-outline' },
  ]);

  const renderScene = BottomNavigation.SceneMap({
    music: MusicRoute,
    albums: AlbumsRoute,
    recents: RecentsRoute,
    notifications: NotificationsRoute,
  });

  return (
    <NavigationContainer>
     
        <BottomNavigation
          compact={false}
          navigationState={{ index, routes }}
          onIndexChange={setIndex}
          renderScene={renderScene}
        />
     

    </NavigationContainer>
  );
}

export default App;
